<template>
	<view>
		<!-- 转移进度(只有转移超时显示) -->
		<view class="transfer-progress" v-if="info.TransferInfo">
			<view class="record-title" style="padding: 0;">转移进度</view>
			<!-- 进度条 -->
			<view class="progress" v-if="transferProcess.length > 0">
				<view class="dot">
					<view><image src="../../../../static/images/progress-active.png"></image></view>
					<view class="title">{{transferProcess[0].name}}</view>
					<view class="time">{{transferProcess[0].time | dateFormatHideY}}</view>
				</view>
				<view class="line" :class="transferStep > 1 ? 'active' : 'de-active'"></view>
				<view class="dot">
					<!-- <view><image :src="handleDetail.TransferState !== 'ASSET_TRANSFER_0001' ? '../../../../static/images/progress-active.png' : '../../../../static/images/progress-deactive.png'"></image></view> -->
					<view><image :src="transferStep > 1 ? '/static/images/progress-active.png' : '/static/images/progress-deactive.png'"></image></view>
					<view class="title">{{transferProcess[1].name}}</view>
					<view class="time">{{transferProcess[1].time | dateFormatHideY}}</view>
				</view>
				<view class="line" :class="transferStep > 2 ? 'active' : 'de-active'"></view>
				<view class="dot">
					<view><image :src="transferStep > 2 ? '/static/images/progress-active.png' : '/static/images/progress-deactive.png'"></image></view>
					<view class="title">{{transferProcess[2].name}}</view>
					<view class="time">{{transferProcess[2].time | dateFormatHideY}}</view>
				</view>
			</view>
			<view class="record-cell blank no-border" style="padding: 20rpx 0 0 0;line-height: 60rpx;" >
				<view>操作员</view>
				<view>{{info.UserNameCn}}</view>
			</view>
		</view>
		<!-- 转移信息 -->
		<view style="margin-top: 30rpx;background-color: #FFFFFF;" v-if="info.TransferInfo">
			<view class="record-title" style="margin-bottom: 10rpx;">转移信息</view>
			<view class="record-cell blank">
				<view>当前房产</view>
				<view>{{info.TransferInfo.OriginOrgName}}</view>
			</view>
			<view class="record-cell blank">
				<view>目标房产</view>
				<view>{{info.TransferInfo.TargetOrgName}}</view>
			</view>
			<view class="record-cell blank">
				<view>完成时间</view>
				<view>{{info.TransferInfo.DayLimit}}天</view>
			</view>
			<view class="record-cell blank no-border">
				<view>备注</view>
				<view style="overflow: auto;text-overflow: clip;white-space: normal;">{{info.TransferInfo.Describe}}</view>
			</view>
		</view>
		<!-- 转移信息 -->
		<view style="margin-top: 30rpx;background-color: #FFFFFF;" v-if="info.ShiftInInfo">
			<view class="record-title" style="margin-bottom: 10rpx;">转移信息</view>
			<view class="record-cell blank">
				<view>当前房产</view>
				<view>{{info.ShiftInInfo.OriginOrgName}}</view>
			</view>
			<view class="record-cell blank">
				<view>目标房产</view>
				<view>{{info.ShiftInInfo.TargetOrgName}}</view>
			</view>
<!-- 			<view class="record-cell blank">
				<view>完成时间</view>
				<view>{{info.ShiftInInfo.DayLimit}}天</view>
			</view>
			<view class="record-cell blank no-border">
				<view>备注</view>
				<view>{{info.ShiftInInfo.Describe}}</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: ['info'], 
		data() {
			return {
				transferProcess: [],
				transferStep: 1
			}
		},
		watch: {
			info: {
				handler() {
					let list = this.info.TransferInfo.TransferStates;
					let state1 = list.find(item => item.TransferState === 'ASSET_TRANSFER_0001');  // 待转移
					this.transferProcess.push({name: "提交转移", time: state1.Time});
					let state2 = list.find(item => item.TransferState === 'ASSET_TRANSFER_0002'); // 转移中
					if (state2) {
						this.transferStep = 2;
						this.transferProcess.push({name: "转移出库", time: state2.Time});
					}
					let state3 = list.find(item => item.TransferState === 'ASSET_TRANSFER_0003'); // 转移完成
					if (state3) {
						this.transferStep = 3;
						this.transferProcess.push({name: "转移完成", time: state3.Time});
					}
					let state4 = list.find(item => item.TransferState === 'ASSET_TRANSFER_0004');  // 取消转移
					if (state4) {
						this.transferStep = 2;
						this.transferProcess.push({name: "取消转移", time: state4.Time});
					}
					if (this.transferProcess.length === 1) {
						this.transferProcess.push({name: "转移出库"});
						this.transferProcess.push({name: "转移完成"});
					} else if (this.transferProcess.length === 2) {
						this.transferProcess.push({name: "转移完成"});
					}
				},
				immediate: true
			}
		},
		filters: {
			dateFormatHideY(val) {
				if (!val) {
					return "";
				}
				let d = new Date(val);
				let now = d.getMonth() < 10 ? `0${d.getMonth()}` : d.getMonth();
				now += "-";
				now += d.getDay() < 10 ? `0${d.getDay()}` : d.getDay();
				now += " ";
				now += d.getHours() < 10 ? `0${d.getHours()}` : d.getHours();
				now += ":";
				now += d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
				return now;
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.transfer-progress {
		margin-top: 30rpx;
		padding: 20rpx 40rpx;
		background-color: #FFFFFF;
		.progress {
			width: 100%;
			height: 220rpx;
			margin: 0 auto;
			padding: 20rpx 0;
			display: flex;
			flex-wrap: wrap;
			border-bottom: 2rpx solid #ECECF0;
			image {
				width: 80rpx;
				height: 80rpx;
			}
			.dot {
				height: 100%;
				width: 140rpx;
				text-align: center;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				.title {
					font-size: 24rpx;
					color: #333333;
				}
				.time {
					font-size: 22rpx;
					color: #666666;
				}
			}
			.line {
				margin: 40rpx -50rpx;
				height: 4rpx;
				width: 200rpx;
			}
		}
		.active {
			background-color: #3075E6;;
		}
		.de-active {
			background-color: #EEF4FF;;
		}
	}
	.record-title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #2A2A2A;
		padding: 10rpx 40rpx;
		background-color: #FFFFFF;
	}
	.record-cell {
		width: 100%;
		min-height: 80rpx;
		font-size: 28rpx;
		padding: 10rpx 40rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		display: flex;
		flex-wrap: wrap;
		background-color: #FFFFFF;
		:nth-child(1) {
			width: 25%;
			border-bottom: 2rpx solid #ECECF0;
		}
		:nth-child(2) {
			width: 75%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			border-bottom: 2rpx solid #ECECF0;
		}
	}
	.no-border {
		view {
			border-bottom: none !important;
		}
	}
	.grey {color: #999999;}
	.blank {color: #000000;font-weight: 500;}
</style>	
